// 创建一个路由器,并暴露出来

// 第一步:引入createRouter
// createWebHashHistory hash模式 #
// createWebHistory history模式 /
import {createRouter,createWebHashHistory,createWebHistory} from 'vue-router'
// 引入一个一个可能要呈现的组件
import Home from '../pages/Home.vue'
import News from '../pages/News.vue'
import About from '../pages/About.vue'
import Detail from '../pages/Detail.vue'

// 第一步:创建路由器 router路由器
const router = createRouter({
    history:createWebHistory(),// 路由工作模式
    // route单个路由 路由规则
    routes:[
        {name:'home',path:'/home',component:Home},
        {
            name:'news',
            path:'/news',
            component:News,
            /* 二级路由 */
            children:[
                {
                    name:'detail',
                    // 这里的?表示为如果不传参数那么表示可不传参数
                    path:'detail/:id/:name/:content?',
                    component:Detail,

                    // 第一种写法:将路由收到的params参数作为props传给路由组件
                    // props:true

                    // 第二种写法:可以自己决定将什么作为props给路由组件 
                    // 这个可以传query参数
                    // props(route){
                    //     console.log('~~~~',route)
                    //     return route.query
                    // }

                    // 第三种写法:对象写法,可以自己决定将什么作为props给路由组件
                    // props:{
                    //     x:100,
                    //     b:200,
                    //     c:300
                    // }
                }
        ]},
        {name:'about',path:'/about',component:About}
    ]
})

// 暴露出去
export default router